<template>
  <el-row :gutter="20" v-loading="loading" style="margin-right:0px">
    <div class="l-rblock">
      <template v-if="columns && columns.length">
        <el-col v-for="col in columns" :key="col.prop" :span="col.span || span">
          <slot v-bind="formData" :name="col.prop">
            <!-- 分割线 -->
            <template v-if="col.dataType == 'dividingLine'">
              <el-divider content-position="right">{{ col.label }}</el-divider>
            </template>
            <el-form-item v-else :label="$t(col.label)" :prop="col.prop">
              <!-- 下拉选择 -->
              <template v-if="col.dataType == 'dataItem'">
                <l-select :disabled="disabled || col.disabled" :options="options[col.dataCode]"
                  v-model="formData[col.prop]" :placeholder="$t(disabled || col.disabled ? '' : '请选择')" />
              </template>
              <!-- 日期 -->
              <template v-else-if="col.dataType == 'date' || col.dataType == 'datetime'">
                <l-date :disabled="disabled || col.disabled" v-model="formData[col.prop]" :dateType="col.dataCode"
                  :format="col.format" :placeholder="$t(disabled || col.disabled ? '' : '请选择')"></l-date>
              </template>
              <!-- 更新时间 -->
              <template v-else-if="col.dataType == 'modifytime'">
                <l-modifytime size="mini" v-model="formData[col.prop]" />
              </template>
              <!-- 日期范围 -->
              <template v-else-if="col.dataType == 'dateRange'">
                <l-date-range :disabled="disabled || col.disabled" v-model="formData[col.prop]" :dateType="col.dataCode"
                  :startPlaceholder="$t(disabled || col.disabled ? '' : '请选择')"
                  :endPlaceholder="$t(disabled || col.disabled ? '' : '请选择')"></l-date-range>
              </template>
              <!-- 年份范围 -->
              <template v-else-if="col.dataType == 'yearRange'">
                <l-year-range :startValue.sync="formData[col.prop1]" :endValue.sync="formData[col.prop2]"
                  :disabled="disabled || col.disabled"></l-year-range>
              </template>
              <!-- 文件 -->
              <template v-else-if="col.dataType == 'file'">
                <l-upload-preview class="upload-files" :disabled="disabled || col.disabled" v-model="formData[col.prop]"
                  :limit="3">
                </l-upload-preview>
              </template>
              <!-- 图片 -->
              <template v-else-if="col.dataType == 'image'">
                <l-upload-preview class="upload-files" :disabled="disabled || col.disabled" v-model="formData[col.prop]"
                  :limit="3" listType="picture-card"> </l-upload-preview>
              </template>
              <!-- 单选框 -->
              <template v-else-if="col.dataType == 'radio'">
                <l-radio :disabled="disabled || col.disabled" :options="options[col.dataCode]"
                  v-model="formData[col.prop]" />
              </template>
              <!-- 单据编码 -->
              <template v-else-if="col.dataType == 'code'">
                <l-code class="custom-code" :code="col.dataCode" v-model="formData[col.prop]"></l-code>
              </template>
              <template v-else-if="col.dataType == 'textarea'">
                <el-input :disabled="disabled || col.disabled" type="textarea" :rows="2" :maxlength="350"
                  v-model="formData[col.prop]" :placeholder="$t(disabled || col.disabled ? '' : '请输入')">
                </el-input>
              </template>
              <!-- 数字类型输入框 -->
              <template v-else-if="col.dataType == 'number'">
                <el-input :disabled="disabled || col.disabled" v-model.number="formData[col.prop]"
                  :placeholder="$t(disabled || col.disabled ? '' : '请输入')">
                  <template v-if="col.append" slot="append">{{ col.append }}</template>
                </el-input>
              </template>
              <!-- 输入框 默认 -->
              <template v-else>
                <el-input :disabled="disabled || col.disabled" v-model="formData[col.prop]"
                  :placeholder="$t(disabled || col.disabled ? '' : '请输入')">
                  <template v-if="col.append" slot="append">{{ col.append }}</template>
                </el-input>
              </template>
            </el-form-item>
          </slot>

        </el-col>
        <el-col :span="24">
          <slot name="other">
          </slot>
        </el-col>
      </template>

    </div>
  </el-row>
</template>
<script>
export default {
  name: 'l-custom-form',
  components: {
  },
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => []
    },
    span: {
      type: Number,
      default: 12,
    },
    formData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      options: {},
      loading: true,
    };
  },
  computed: {

  },
  mounted() {
    this.init();
    this.$watch(
      () => this.formData,
      {
        deep: true,
        handler: (newVal) => {
        }
      }
    )
  },
  methods: {
    init() {
      this.loading = true
      // 获取数据字典
      this.columns.forEach(t => {
        if (t.dataType == 'dataItem' || t.dataType == 'radio') {
          if (!this.options[t.dataCode]) {
            this.options[t.dataCode] = this.lr_dataItemOptions(this.lr_dataItem[t.dataCode])
          }
        }
      })
      setTimeout(() => {
        this.loading = false
      }, 500);
    },
  }
}
</script>
<style lang="scss" scoped>
::v-deep {

  .el-input.is-disabled,
  .custom-code {
    .el-input__inner {
      background-color: #f5f5f5 !important;
      border-color: #f5f5f5 !important;
      cursor: text;
    }

    .el-input-group__append {
      background-color: #f1f1f1 !important;
      border-color: #f5f5f5 !important;
      border-left: 1px solid #d9d9d9 !important;
    }
  }

  .el-input-group__append {
    padding: 0 10px;
  }
}
</style>